<template>
	<view>
		<baseHead title="邀请加入" />
		<view class="title">扫码加入，轻松畅享</view>
		<view class="mian-w">
			<view class="mian">
				<u-avatar class="user-avatar" size="64" :src="userAvatar"></u-avatar>
				<view class="user-name">{{userName}}</view>
				<view class="corp-name">邀请您加入{{corpName}}</view>
				<view class="qr-code-w">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrText" size="300" sizeUnit="rpx"
						:options="{ margin: 10 }"></uqrcode>
				</view>
				<view class="down-tips" align="center" @click="downloadQR">下载二维码</view>
			</view>
		</view>
		<view class="copy-btn">
			<u-button type="primary" size="large" shape="circle" color="#3476FE" text="复制链接邀请加入" @click="copy()"></u-button>
		</view>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		components: {
			baseHead,
		},
		data() {
			return {
				userAvatar: '',
				userName: '',
				corpId: 0,
				corpName: '',
				qrText: '',
				qrShow: false,
			}
		},
		mounted() {
			const app = getApp();
			const userInfo = app.globalData.user;
			this.userName = userInfo.RealName ? userInfo.RealName : userInfo.UserName;
			this.userAvatar = userInfo.HeadIcon ? `${this.$config.domain.staticUrl}${userInfo.HeadIcon}` : '';
			this.corpName = app.globalData.currentCorp?.FullName;

			const cacheKey = `invite:code:${userInfo.UserId}:${app.globalData.currentCorp?.Id}`;
			let cacheVal = uni.getStorageSync(cacheKey);
			if (cacheVal) {
				cacheVal = JSON.parse(cacheVal)
				if (cacheVal.expire && Date.now() / 1000 - cacheVal.time > cacheVal.expire) {
					uni.removeStorageSync(cacheKey)
				} else {
					console.log('缓存-获取邀请码')
					const code = cacheVal.data;
					const baseUrl = 'https://www.hrencai.cn';
					const url = baseUrl + "/corp/join?code=" + code;
					this.qrText = url
				}
			}

			if (!this.qrText || this.qrText.length == 0) {
				console.log('Http-获取邀请码')
				this.$http.core.invite_url().then(res => {
					const code = res.Result.Code;
					const baseUrl = 'https://www.hrencai.cn';
					const url = baseUrl + "/corp/join?code=" + code;
					this.qrText = url
					//缓存30分钟避免重复创建
					uni.setStorageSync(cacheKey, JSON.stringify({
						data: code, //存储的数据
						time: Date.now() / 1000, //记录存储的时间戳
						expire: 60 * 30 //记录过期时间，单位秒
					}))
				})
			}
		},
		methods: {
			downloadQR() {
				uni.showModal({
					title: '提示',
					content: '确认保存二维码?',
					success: function(res) {
						if (res.confirm) {
							this.$refs.uqrcode.save({
								success: () => {
									uni.showToast({
										icon: 'success',
										title: '保存成功'
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			copy() {
				uni.setClipboardData({
					data: `${this.userName}邀请您加入${this.corpName}，因为您的加入会更精彩！\r\n点击下方链接，赶快加入我们吧！\r\n${this.qrText}`,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F9FB;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		color: #030303;
		text-align: center;
		height: 250rpx;
		line-height: 250rpx;
	}

	.mian-w {
		padding: 0 60rpx;
	}

	.mian {
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 50rpx 1rpx rgba(216, 231, 231, 0.16);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 64rpx;
		padding: 20rpx;

		.user-avatar {
			margin-top: -74rpx;
		}

		.user-name {
			line-height: 80rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #030303;
		}

		.corp-name {
			line-height: 80rpx;
			font-size: 26rpx;
			color: #030303
		}

		.down-tips {
			line-height: 60rpx;
			font-size: 26rpx;
			color: #030303;
		}

		.qr-code-w {
			margin: 0 auto;
			width: 300rpx;
			height: 300rpx;
			overflow: hidden;

			.qr-code {
				width: 300rpx;
				height: 300rpx;
			}
		}
	}

	.copy-btn {
		margin-top: 80rpx;
		padding: 0 60rpx;
	}
</style>